<template>
  <div id="trafficMarket">
    <div class="traffic_market_top">
      <div class="header">
        <div class="header_left">
          <p class="title">正在直播</p>
          <p class="nowTime">{{timestamp(1638933000,"Y-M-D h:m:s")}}</p>
        </div>
        <div class="header_right">
          <span class="refreshTime">{{ mTime }}:{{ sTime }}后更新</span>
          <el-tooltip
            class="item"
            effect="light"
            content="数据展示为当前时间正在开播的带货直播间数据"
            placement="bottom"
            popper-class="mytooltip"
          >
            <img src="@/assets/meng/search_result04.png" alt class="tooltip" />
          </el-tooltip>
        </div>
      </div>
      <div class="main">
        <!-- 带货直播间 -->
        <div class="main_box">
          <p class="liveRoom">带货直播间</p>
          <div class="live_room_count">
            <span class="count">21488</span>
            <span class="span">环比上刻&nbsp;</span>
            <span>
              <img class="img" src="@/assets/wang/live/up01.png" />
              <!-- <img class="img" src="@/assets/wang/goods/ddown.png" /> -->
              <span class="percent">{{ Math.abs(3.10) }} %</span>
            </span>
          </div>
        </div>
        <i class="line"></i>
        <!-- 实时观看人数 -->
        <div class="main_box">
          <p class="liveRoom">实时观看人数</p>
          <div class="live_room_count">
            <span class="count">185.7W</span>
            <span class="span">环比上刻&nbsp;</span>
            <span>
              <!-- <img class="img" src="@/assets/wang/live/up01.png" /> -->
              <img class="img" src="@/assets/wang/goods/ddown.png" />
              <span class="percent">{{ Math.abs(3.10) }} %</span>
            </span>
          </div>
        </div>
        <i class="line"></i>
        <!-- 实时直播在售商品数 -->
        <div class="main_box">
          <p class="liveRoom">实时直播在售商品数</p>
          <div class="live_room_count">
            <span class="count">185.7W</span>
            <span class="span">环比上刻&nbsp;</span>
            <span>
              <!-- <img class="img" src="@/assets/wang/live/up01.png" /> -->
              <img class="img" src="@/assets/wang/goods/ddown.png" />
              <span class="percent">{{ Math.abs(3.10) }} %</span>
            </span>
          </div>
        </div>
        <i class="line"></i>
        <!-- 实时直播预估销量 -->
        <div class="main_box">
          <p class="liveRoom">实时直播预估销量</p>
          <div class="live_room_count">
            <span class="count">185.7W</span>
            <span class="span">环比上刻&nbsp;</span>
            <span>
              <!-- <img class="img" src="@/assets/wang/live/up01.png" /> -->
              <img class="img" src="@/assets/wang/goods/ddown.png" />
              <span class="percent">{{ Math.abs(3.10) }} %</span>
            </span>
          </div>
        </div>
        <i class="line"></i>
        <!-- 实时直播预估销售额 -->
        <div class="main_box">
          <p class="liveRoom">实时直播预估销售额</p>
          <div class="live_room_count">
            <span class="count">185.7W</span>
            <span class="span">环比上刻&nbsp;</span>
            <span>
              <!-- <img class="img" src="@/assets/wang/live/up01.png" /> -->
              <img class="img" src="@/assets/wang/goods/ddown.png" />
              <span class="percent">{{ Math.abs(3.10) }} %</span>
            </span>
          </div>
        </div>
        <i class="line"></i>
        <!-- 实时带货直播间点赞数 -->
        <div class="main_box">
          <p class="liveRoom">实时带货直播间点赞数</p>
          <div class="live_room_count">
            <span class="count">185.7W</span>
            <span class="span">环比上刻&nbsp;</span>
            <span>
              <!-- <img class="img" src="@/assets/wang/live/up01.png" /> -->
              <img class="img" src="@/assets/wang/goods/ddown.png" />
              <span class="percent">{{ Math.abs(3.10) }} %</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="live_trend">
      <div class="live_trend_header">
        <p class="title">直播电商趋势</p>
        <radio_group01 :radio_values="['24小时', '近7天', '30天']" v-model="KindName" class="tab01" />
      </div>
      <div class="trend_wrap">
        <div class="trend_list">
          <div
            class="trend_item"
            :class="{'active_item':item.active}"
            v-for="item,index in list"
            :key="index"
            @click="showLine(item)"
          >{{item.name}}</div>
        </div>
        <LineChart :series="series" :yAxis="yAxis" :xAxis="xAxis" v-if="series.length" />
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from './LineChartTraffic.vue';
export default {
  name: 'trafficMarket',
  components: { LineChart },
  data() {
    return {
      //倒计时更新时间
      mTime: '10',
      sTime: '00',
      KindName: '24小时',
      startDate: '', //开始时间
      endDate: '', //结束时间
      list: [
        {
          id: 1,
          name: '带货直播间',
          active: false
        },
        {
          id: 2,
          name: '实时直播在售商品数',
          active: false
        },
        {
          id: 3,
          name: '实时观看人数',
          active: false
        },

        {
          id: 4,
          name: '实时带货直播间点赞数',
          active: false
        },
        {
          id: 5,
          name: '实时直播预估销量',
          active: false
        },
        {
          id: 6,
          name: '实时直播预估销售额',
          active: true
        }
      ],
      series: [],
      yAxis: [],
      xAxis: {
        axisTick: {
          alignWithLabel: true
        },
        data: [1, 2, 3, 4, 5, 6]
      }
    };
  },
  created() {
    // this.getTrafficChartsLine();
  },
  mounted() {
    this.getTrafficChartsLine().then(() => {
      this.showLine();
    });
    this.downTimeFn();
  },
  watch: {
    // 时间选择器
    KindName: function (newVal) {
      // 清空上一个数组
      if (this.KindName != '') {
        this.KindName = newVal;
        // 调接口
        this.getTime();
      }
    }
  },

  methods: {
    // 倒计时更新时间方法
    downTimeFn() {
      let that = this;
      let time = 600;
      setInterval(() => {
        time--;
        let min = Math.floor(time / 60);
        let sec = Math.floor(time % 60);
        min < 10 ? (that.mTime = '0' + min) : (that.mTime = min);
        sec < 10 ? (that.sTime = '0' + sec) : (that.sTime = sec);
        if (time == 0) {
          // 重新掉接口
          time = 600;
        }
      }, 1000);
    },
    // 获取时间
    getTime() {
      switch (this.KindName) {
        case '24小时':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          break;

        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        default:
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          break;
      }
      console.log(this.startDate, this.endDate);
    },
    // 点击按钮展示折线图
    showLine(item) {
      this.yAxis = [];
      this.series = [];
      if (item) {
        item.active = !item.active;
      } else {
        //首次默认选中预计销量
        item = this.list[5];
      }
      let count = 0;
      this.list.forEach(item => {
        if (item.active) {
          count = 1;
        }
      });
      if (!count) {
        this.list[5].active = true;
      }
      this.setChartsData();
    },
    setChartsData() {
      let list = this.list;
      for (let i = 0; i < list.length; i++) {
        if (list[i].active) {
          let seriesObj = {
            name: list[i].name,
            type: 'line',
            data: list[i].val
          };
          let yAxis = {
            type: 'value',
            name: list[i].name,
            offset: 100,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#09203d '
              },
              show: true //y轴坐标点消失
            },
            show: true, //y轴坐标点消失
            axisLabel: {
              formatter: '{value} ml'
            }
          };
          this.yAxis.unshift(yAxis);
          this.yAxis.forEach((item, idx) => {
            // item = idx ? '' : item.name;
          });
          this.series.unshift(seriesObj);
        }
      }
    },
    // 获取直播流量大盘折线图
    getTrafficChartsLine() {
      return new Promise((solve, reject) => {
        this.$axios.get(`/api/live/GetLiveLineChart?api-version=2&day=${24 + 'h'}`).then(res => {
          if (!res.data.code) {
            let dataObj = res.data.data;
            this.list.forEach(item => {
              if (item.id == 1) {
                item.val = dataObj.pro_room_count;
              } else if (item.id == 2) {
                item.val = dataObj.pro_line_count;
              } else if (item.id == 3) {
                item.val = dataObj.vistor_count;
              } else if (item.id == 4) {
                item.val = dataObj.favorite_count;
              } else if (item.id == 5) {
                item.val = dataObj.volume;
              } else if (item.id == 6) {
                item.val = dataObj.amount;
              }
            });
            this.xAxis.data = dataObj.time_stamp;
            solve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
#trafficMarket {
  width: 100%;
  height: 100vh;
  padding: 14px 14px 0;
  background: #f1f1f1;
  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  .title {
    font-size: 16px;
    color: #222;
    font-weight: 600;
    position: relative;
    text-indent: 9px;
  }
  .title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #fd7f2c;
    border-radius: 2px;
  }
  .traffic_market_top {
    width: 100%;
    // height: 157px;
    padding: 26px 20px;
    background-color: #fff;
    border-radius: 4px;
    .header {
      display: flex;
      justify-content: space-between;
      .header_left {
        display: flex;
        .nowTime {
          margin-left: 9px;
          font-size: 14px;
          color: #888;
        }
      }
      .header_right {
        font-size: 14px;
        color: #555;
        .tooltip {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
      }
    }
    .main {
      display: flex;
      margin-top: 30px;
      .main_box {
        flex: 1;
        .liveRoom {
          font-size: 14px;
          font-weight: 600;
          color: #555;
          margin-bottom: 20px;
        }
        .live_room_count {
          white-space: nowrap;
          .count {
            font-size: 32px;
            font-weight: 600;
            color: #222;
            margin-right: 13px;
          }
          .span {
            font-size: 12px;
            color: #888;
          }
          .img {
            width: 8px;
            height: 12px;
          }
          .percent {
            font-size: 16px;
            font-weight: 600;
            color: #ea1b0b;
          }
        }
      }
      .line {
        width: 1px;
        height: 45px;
        background-color: #efefef;
        margin: auto 0;
        margin-right: 40px;
      }
    }
  }
  .live_trend {
    margin-top: 10px;
    padding: 14px 14px 0;
    background: #fff;
    .live_trend_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .trend_wrap {
      margin-top: 11px;
      .trend_list {
        display: flex;
        justify-content: center;
        .trend_item {
          height: 32px;
          line-height: 11px;
          margin-right: 19px;
          border-radius: 4px;
          border: solid 1px #e5e5e5;
          padding: 9px 16px;
          font-size: 14px;
          color: #555;
        }
        .active_item {
          color: #fd7f2c;
          border-color: #fd7f2c;
        }
      }
    }
  }
}
</style>